<template>
  <div class="detailrateinfo">
    <div v-if="Object.keys(rateInfo).length !== 0">
      <div class="usertop">
        <span>用户评价</span>
        <span>更多</span>
      </div>
      <div class="userInfo">
        <img :src="rateInfo.user.avatar" alt="" />
        <span> {{ rateInfo.user.uname }}</span>
      </div>
      <p class="infoUser">{{ rateInfo.content }}</p>
      <div class="other">
        <span>{{ rateInfo.created | showDate }}</span>
        <span>{{ rateInfo.style }}</span>
      </div>
      <div class="userImg">
        <img
          v-for="item in rateInfo.images"
          :src="item"
          alt=""
          :key="item"
          @load="imgLoad"
        />
      </div>
    </div>
    <div v-else class="norate">
      <div class="usertop">
        <span>用户评价</span>
        <span>更多</span>
      </div>
      <p>该商品没有任何评价！</p>
    </div>
  </div>
</template>

<script>
import { formatDate } from "common/utils";
export default {
  name: "DetailRateInfo",
  props: {
    rateInfo: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {};
  },
  methods: {
    imgLoad() {
      this.$emit("userImgLoad");
    },
  },
  filters: {
    showDate(value) {
      const date = new Date(value * 1000);
      // formatDate(date,'yyyy-MM-dd hh:mm:ss')
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  components: {},
};
</script>

<style  scoped>
.detailrateinfo {
  padding: 10px 10px;
}

.usertop {
  height: 50px;
  line-height: 50px;
  color: black;
  border-bottom: 1px solid #ccc;
}
.usertop span:first-child {
  float: left;
}
.usertop span:last-child {
  float: right;
}
.userInfo {
  margin: 10px 0px;
}
.userInfo img {
  width: 15%;
  vertical-align: middle;
  margin-right: 10px;
}
.infoUser {
  font-size: 14px;
  line-height: 20px;
  margin: 10px 0px;
}
.other {
  font-size: 14px;
  color: rgb(182, 182, 182);
  margin: 10px 0px;
}
.other span:first-child {
  margin-right: 10px;
}
.userImg img {
  width: 80px;
  height: 80px;
  margin-right: 5px;
  vertical-align: middle;
  object-fit: cover;
}

.norate {
  height: 150px;
}
.norate p {
  line-height: 40px;
}
</style>
